<template>
  <a-layout-header class="header">
    <div class="logo" >
      <router-link to="/welcome" style="color: white;">
        鱼摆摆12306
      </router-link>
    </div>
    <div style="float: right; color: white;">
      您好：{{member.mobile}} &nbsp;&nbsp;
      <a @click="logout" style="color: #8c8c8c; cursor: pointer;">
        退出登录
      </a>
    </div>
    <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined /> &nbsp; 欢迎
        </router-link>
      </a-menu-item>
      <a-menu-item key="/passenger">
        <router-link to="/passenger">
          <user-outlined /> &nbsp; 乘车人管理
        </router-link>
      </a-menu-item>
      <!-- 游戏菜单栏 -->
      <a-sub-menu key="games">
        <template #title>
                <span>
                  <RobotOutlined />
                  &nbsp; 游戏
                </span>
        </template>
        <a-menu-item key="/guess">
          <router-link to="/guess">
            <RocketOutlined /> &nbsp; 猜数游戏
          </router-link>
        </a-menu-item>
        <!-- 其他游戏项可以在这里添加 -->
      </a-sub-menu>
    </a-menu>
  </a-layout-header>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import store from "@/store";
import router from "@/router";

export default defineComponent({
  name: "the-header-view",
  setup() {
    let member = store.state.member;
    const selectedKeys = ref([]);

    watch(() => router.currentRoute.value.path, (newValue) => {
      console.log('watch', newValue);
      selectedKeys.value = [];
      selectedKeys.value.push(newValue);
    }, { immediate: true });

    const logout = () => {
      store.commit("setMember", "")
      console.log('member：', member);
      router.push('/login'); // Optionally redirect to the login page
    };

    return {
      selectedKeys,
      member,
      logout
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
  float: left;
  height: 31px;
  width: 150px;
  color: white;
  font-size: 18px;
}
</style>